<script setup>
import { ref } from 'vue';
import { Memo,  Platform, DocumentRemove, VideoCameraFilled, LocationFilled, Football, Key } from '@element-plus/icons-vue';

const menuNavList = ref([
    { id: 1, name: '首页', url: '/home', state: '1', flag: '1', type: '1' },
    { id: 2, name: '题库管理', url: '/question', state: '1', flag: '1', type: '1' },
    { id: 3, name: '考试管理', url: '/exam', state: '1', flag: '1', type: '1' },
    { id: 4, name: '试卷管理', url: '/task', state: '1', flag: '1', type: '1' },
    { id: 5, name: '课程管理', url: '/course', state: '1', flag: '1', type: '1' },
    { id: 6, name: '项目管理', url: '/project', state: '1', flag: '1', type: '1' },
    { id: 6, name: '比赛管理', url: '/contest', state: '1', flag: '1', type: '1' },
    { id: 6, name: '求职管理', url: '/job', state: '1', flag: '1', type: '1' },
]);
// 保存数据库的用户名
const username = ref('admin');

import { useRouter } from 'vue-router';

const router = useRouter();

const goToLogin = () => {
  router.push('/login'); // 跳转到登录路由
};
// 记录当前展开的子菜单索引
const activeSubMenuIndex = ref('');

const handleSubMenuOpen = (index) => {
  if (activeSubMenuIndex.value === index) {
    activeSubMenuIndex.value = ''; // 再次点击关闭当前子菜单
  } else {
    activeSubMenuIndex.value = index; // 打开新的子菜单并关闭其他子菜单
  }
};
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧区域 -->
        <el-aside>
            <div class="el-aside__logo"></div>
            <el-menu router  default-active="home/dataAnalysis">
                <el-menu-item index="/home/dataAnalysis">
                    <el-icon><icon-menu /></el-icon>
                    <span>首页</span>
                 </el-menu-item>
                <el-sub-menu index="1">
                    <template #title>
                        <el-icon><Memo /></el-icon>
                        <span>题库管理</span>
                    </template>
                    <el-menu-item-group>    
                        <el-menu-item index="/question/management">题目管理</el-menu-item>
                    <el-menu-item index="/question/type">题目类型</el-menu-item>
                    <el-menu-item index="/question/difficulty">题目难度</el-menu-item>
                    <el-menu-item index="/question/import-export">导入导出</el-menu-item>

                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                        <el-icon><Platform /></el-icon>
                        <span>考场管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/exam/manager">试卷管理</el-menu-item>
                        <el-menu-item index="/exam/schedule">考试安排</el-menu-item>
                        <el-menu-item index="/exam/monitor">考试监控</el-menu-item>
                        <el-menu-item index="/exam/scoreAnalysis">成绩管理</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="3">
                    <template #title>
                        <el-icon><VideoCameraFilled /></el-icon>
                        <span>课程管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/course/upload">课程上传</el-menu-item>
                        <el-menu-item index="/course/category">课程分类</el-menu-item>
                        <el-menu-item index="/course/access">课程访问控制</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="4">
                    <template #title>
                        <el-icon><LocationFilled /></el-icon>
                        <span>项目管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/project/myproject">我的项目</el-menu-item>
                        <el-menu-item index="/project/createproject">创建项目</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="5">
                    <template #title>
                        <el-icon><Football /></el-icon>
                        <span>比赛管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/contest/RaceCom">比赛概括</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="6">
                    <template #title>
                        <el-icon><WalletFilled /></el-icon>
                        <span>求职管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/job/manager">招聘管理</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="7">
                    <template #title>
                        <el-icon><CopyDocument /></el-icon>
                        <span>报表管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/report/questionReport">题库报表</el-menu-item>
                        <el-menu-item index="/report/courseReport">课程报表</el-menu-item>
                        <el-menu-item index="/report/examReport">考试报表</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
                <el-sub-menu index="8">
                    <template #title>
                        <el-icon><SwitchButton /></el-icon>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/systemmanager/user">用户管理</el-menu-item>
                        <el-menu-item index="/systemmanager/student">学生管理</el-menu-item>
                        <el-menu-item index="/systemmanager/teacher">老师管理</el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 主区域头部 -->
            <el-header>
                <!-- 头部左侧内容 -->
                <div :model="username"><strong>欢迎您：{{username}}</strong></div>
                <!-- 头部右侧内容：用户头像和下拉菜单 -->
                <el-dropdown>
                    <span class="el-dropdown__box">
                        <el-avatar
                            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                            size="small"
                            @click="goToLogin"
                        />
                        <el-icon class="el-icon--right">
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 主区域内容 -->
            <el-main>
                <RouterView></RouterView>
            </el-main>
            <!-- 主区域脚部 -->
            <el-footer>XXX知识版权所有</el-footer>
        </el-container>
    </el-container>
</template>

<style lang="scss" scoped>
.layout-container {
    height: 100vh;
    background-color: #f5f6fa; // 更柔和的背景色
    display: flex;

    .el-aside {
        width: 240px; // 固定宽度
        background-color: #ffffff;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05); // 添加阴影效果
        transition: width 0.3s ease; // 添加过渡效果
        overflow: hidden; // 隐藏滚动条

        &__logo {
            height: 100px;
            background: url('../img/Logo.png') no-repeat center / 120px;
            border-bottom: 1px solid #e8e8e8; // 添加分割线
        }

        .el-menu {
            border-right: none;
            padding-top: 20px; // 增加内边距
            height: 100%;
            overflow-y: auto; // 允许滚动
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none;  /* Internet Explorer 10+ */

            &::-webkit-scrollbar {
                display: none; /* Safari and Chrome */
            }

            .el-sub-menu {
                .el-menu-item-group {
                    .el-menu-item {
                        font-size: 14px;
                        color: #606266; // 更柔和的文字颜色
                        padding-left: 50px !important; // 增加缩进
                        transition: all 0.3s ease; // 添加过渡效果

                        &:hover {
                            background-color: #f5f7fa; // 悬停背景色
                        }

                        // 选中状态样式
                        &.is-active {
                            background-color: #827cf7; // 选中背景色
                            color: #ffffff; // 选中文字颜色
                            font-weight: 500; // 加粗文字

                            .el-icon {
                                color: #ffffff; // 选中图标颜色
                            }
                        }
                    }
                }

                // 父菜单的选中状态
                &.is-active {
                    .el-sub-menu__title {
                        color: #827cf7; // 父菜单选中文字颜色
                        font-weight: 500; // 加粗文字

                        .el-icon {
                            color: #827cf7; // 父菜单选中图标颜色
                        }
                    }
                }
            }
        }
    }

    .el-container {
        flex: 1;
        display: flex;
        flex-direction: column;

        .el-header {
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 24px; // 增加内边距
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); // 添加阴影效果
            border-bottom: 1px solid #e8e8e8; // 添加分割线

            .el-dropdown__box {
                display: flex;
                align-items: center;
                cursor: pointer;

                .el-avatar {
                    margin-right: 8px;
                }

                .el-icon--right {
                    color: #909399;
                    transition: color 0.3s ease;

                    &:hover {
                        color: #827cf7;
                    }
                }
            }
        }

        .el-main {
            flex: 1;
            padding: 24px; // 增加内边距
            background-color: #ffffff;
            margin: 16px; // 增加外边距
            border-radius: 8px; // 添加圆角
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); // 添加阴影效果
        }

        .el-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: #909399; // 更柔和的文字颜色
            background-color: #ffffff;
            padding: 16px 0; // 增加内边距
            border-top: 1px solid #e8e8e8; // 添加分割线
        }
    }
}
</style>